<template>
  <div class="page" style="padding: 20px 10px 20px 0;width: 100%;height: 100%"
       v-loading.fullscreen.lock="fullscreenLoading">
    <el-tabs tab-position="left" v-model="curTab" @tab-click="changeTab" style="height: 100%; width: 100%">
      <el-tab-pane label="新装" name="1" lazy>
        <template v-if="list.length>0">
          <div ref="scroll1" class="scroll-list"
               style="white-space:nowrap;flex:1;overflow:hidden;display:flex;flex-flow:column;height: calc(100vh - 40px);">
            <div class="scroll-content">
              <div class="card" v-for="(item, index) in list" :key="item.id" @click="showDetail(item.id)">
                <div class="title">
                  <div>{{ item.name }}</div>
                </div>
                <div class="tip" v-if="item.customer_name">
                  <div class="text-gray">
                    客户名称：{{ item.customer_name }}
                  </div>
                </div>
                <div class="tip">
                  <div :class="[item.is_expire?'text-red':'text-gray']">
                    截止时间：{{ (item.deadline).substring(0, 10) }}
                  </div>

                </div>
                <div class="tip">
                  <div>待审核：<span
                    :style="{color:(item.installed_to_check_num>0?'orange':'#111')}">{{
                      item.installed_to_check_num
                    }}</span>
                  </div>
                </div>
                <div class="tip">
                  <div>已通过：<span
                    :style="{color:(item.installed_passed_num>0?'green':'#111')}">{{ item.installed_passed_num }}</span>
                  </div>
                </div>
                <div class="tip">
                  <div>总数：{{ item.total_num }}</div>
                  <div>
                    <el-tag size="mini" v-if="!item.closed && !!item.is_exe && !item.is_expire">执行中
                    </el-tag>
                    <el-tag size="mini" v-else-if="!!item.closed && !!item.hand_closed"
                            type="success">手动关闭
                    </el-tag>
                    <el-tag size="mini" v-else-if="!!item.closed && !item.hand_closed"
                            type="success">已完成
                    </el-tag>
                    <el-tag size="mini" v-else-if="!item.closed && !!item.is_expire" type="warning">
                      已过期
                    </el-tag>
                    <el-tag size="mini" v-else type="info">未执行</el-tag>
                  </div>
                </div>
              </div>
              <div v-if="isEnd" class="text-gray text-center">这里到底啦</div>
            </div>
          </div>
        </template>
        <template v-else>
          <empty-img _show _text="无工单" class="box-empty"></empty-img>
        </template>
      </el-tab-pane>
      <el-tab-pane label="上刊" name="2" lazy>
        <template v-if="list.length>0">
          <div ref="scroll2" class="scroll-list"
               style="white-space:nowrap;flex:1;overflow:hidden;display:flex;flex-flow:column;height: calc(100vh - 40px);">
            <div class="scroll-content">
              <div class="card" v-for="(item, index) in list" :key="item.id" @click="showDetail(item.id)">
                <div class="title">
                  <div>{{ item.name }}</div>
                </div>
                <div class="tip">
                  <div class="text-gray">
                    客户名称：{{ item.customer_name }}
                  </div>
                </div>
                <div class="tip" v-if="item.customer_name">
                  <div :class="[item.is_expire?'text-red':'text-gray']">
                    截止时间：{{ (item.deadline).substring(0, 10) }}
                  </div>
                  
                </div>
                <div class="tip">
                  <div>待审核：<span
                    :style="{color:(item.installed_to_check_num>0?'orange':'#111')}">{{
                      item.installed_to_check_num
                    }}</span>
                  </div>
                </div>
                <div class="tip">
                  <div>已通过：<span
                    :style="{color:(item.installed_passed_num>0?'green':'#111')}">{{ item.installed_passed_num }}</span>
                  </div>
                </div>
                <div class="tip">
                  <div>总数：{{ item.total_num }}</div>
                  <div>
                    <el-tag size="mini" v-if="!item.closed && !!item.is_exe && !item.is_expire && !item.hang_up">执行中
                    </el-tag>
                    <el-tag size="mini" v-else-if="!!item.closed && !!item.hand_closed"
                            type="success">手动关闭
                    </el-tag>
                    <el-tag size="mini" v-else-if="!!item.closed && !item.hand_closed"
                            type="success">已完成
                    </el-tag>
                    <el-tag size="mini" v-else-if="!item.closed && !!item.is_expire" type="warning">
                      已过期
                    </el-tag>
					<el-tag size="mini" v-else-if="!item.closed && !item.is_expire && !!item.hang_up" type="danger">
					  已暂停
					</el-tag>
                    <el-tag size="mini" v-else type="info">未执行</el-tag>
                  </div>
                </div>
              </div>
              <div v-if="isEnd" class="text-gray text-center">这里到底啦</div>
            </div>
          </div>
        </template>
        <template v-else>
          <empty-img _show _text="无工单" class="box-empty"></empty-img>
        </template>
      </el-tab-pane>
      <el-tab-pane label="下刊" name="3" lazy>
        <template v-if="list.length>0">
          <div ref="scroll3" class="scroll-list"
               style="white-space:nowrap;flex:1;overflow:hidden;display:flex;flex-flow:column;height: calc(100vh - 40px);">
            <div class="scroll-content">
              <div class="card" v-for="(item, index) in list" :key="item.id" @click="showDetail(item.id)">
                <div class="title">
                  <div>{{ item.name }}</div>
                </div>
                <div class="tip" v-if="item.customer_name">
                  <div class="text-gray">
                    客户名称：{{ item.customer_name }}
                  </div>
                </div>
                <div class="tip">
                  <div :class="[item.is_expire?'text-red':'text-gray']">
                    截止时间：{{ (item.deadline).substring(0, 10) }}
                  </div>

                </div>
                <div class="tip">
                  <div>待审核：<span
                    :style="{color:(item.installed_to_check_num>0?'orange':'#111')}">{{
                      item.installed_to_check_num
                    }}</span>
                  </div>
                </div>
                <div class="tip">
                  <div>已通过：<span
                    :style="{color:(item.installed_passed_num>0?'green':'#111')}">{{ item.installed_passed_num }}</span>
                  </div>
                </div>
                <div class="tip">
                  <div>总数：{{ item.total_num }}</div>
                  <div>
                    <el-tag size="mini" v-if="!item.closed && !!item.is_exe && !item.is_expire">执行中
                    </el-tag>
                    <el-tag size="mini" v-else-if="!!item.closed && !!item.hand_closed"
                            type="success">手动关闭
                    </el-tag>
                    <el-tag size="mini" v-else-if="!!item.closed && !item.hand_closed"
                            type="success">已完成
                    </el-tag>
                    <el-tag size="mini" v-else-if="!item.closed && !!item.is_expire" type="warning">
                      已过期
                    </el-tag>
                    <el-tag size="mini" v-else type="info">未执行</el-tag>
                  </div>
                </div>
              </div>
              <div v-if="isEnd" class="text-gray text-center">这里到底啦</div>
            </div>
          </div>
        </template>
        <template v-else>
          <empty-img _show _text="无工单" class="box-empty"></empty-img>
        </template>
      </el-tab-pane>
      <el-tab-pane label="巡检" name="4" lazy>
        <template v-if="list.length>0">
          <div ref="scroll4" class="scroll-list"
               style="white-space:nowrap;flex:1;overflow:hidden;display:flex;flex-flow:column;height: calc(100vh - 40px);">
            <div class="scroll-content">
              <div class="card" v-for="(item, index) in list" :key="item.id" @click="showDetail(item.id)">
                <div class="title">
                  <div>{{ item.name }}</div>
                </div>
                <div class="tip" v-if="item.customer_name">
                  <div class="text-gray">
                    客户名称：{{ item.customer_name }}
                  </div>
                </div>
                <div class="tip">
                  <div :class="[item.is_expire?'text-red':'text-gray']">
                    截止时间：{{ (item.deadline).substring(0, 10) }}
                  </div>

                </div>
                <div class="tip">
                  <div>待审核：<span
                    :style="{color:(item.installed_to_check_num>0?'orange':'#111')}">{{
                      item.installed_to_check_num
                    }}</span>
                  </div>
                </div>
                <div class="tip">
                  <div>已通过：<span
                    :style="{color:(item.installed_passed_num>0?'green':'#111')}">{{ item.installed_passed_num }}</span>
                  </div>
                </div>
                <div class="tip">
                  <div>总数：{{ item.total_num }}</div>
                  <div>
                    <el-tag size="mini" v-if="!item.closed && !!item.is_exe && !item.is_expire">执行中
                    </el-tag>
                    <el-tag size="mini" v-else-if="!!item.closed && !!item.hand_closed"
                            type="success">手动关闭
                    </el-tag>
                    <el-tag size="mini" v-else-if="!!item.closed && !item.hand_closed"
                            type="success">已完成
                    </el-tag>
                    <el-tag size="mini" v-else-if="!item.closed && !!item.is_expire" type="warning">
                      已过期
                    </el-tag>
                    <el-tag size="mini" v-else type="info">未执行</el-tag>
                  </div>
                </div>
              </div>
              <div v-if="isEnd" class="text-gray text-center">这里到底啦</div>
            </div>
          </div>
        </template>
        <template v-else>
          <empty-img _show _text="无工单" class="box-empty"></empty-img>
        </template>
      </el-tab-pane>
      <el-tab-pane label="维修" name="5" lazy>
        <template v-if="list.length>0">
          <div ref="scroll5" class="scroll-list"
               style="white-space:nowrap;flex:1;overflow:hidden;display:flex;flex-flow:column;height: calc(100vh - 40px);">
            <div class="scroll-content">
              <div class="card" v-for="(item, index) in list" :key="item.id" @click="showDetail(item.id)">
                <div class="title">
                  <div>{{ item.name }}</div>
                </div>
                <div class="tip" v-if="item.customer_name">
                  <div class="text-gray">
                    客户名称：{{ item.customer_name }}
                  </div>
                </div>
                <div class="tip">
                  <div :class="[item.is_expire?'text-red':'text-gray']">
                    截止时间：{{ (item.deadline).substring(0, 10) }}
                  </div>

                </div>
                <div class="tip">
                  <div>待审核：<span
                    :style="{color:(item.installed_to_check_num>0?'orange':'#111')}">{{
                      item.installed_to_check_num
                    }}</span>
                  </div>
                </div>
                <div class="tip">
                  <div>已通过：<span
                    :style="{color:(item.installed_passed_num>0?'green':'#111')}">{{ item.installed_passed_num }}</span>
                  </div>
                </div>
                <div class="tip">
                  <div>总数：{{ item.total_num }}</div>
                  <div>
                    <el-tag size="mini" v-if="!item.closed && !!item.is_exe && !item.is_expire">执行中
                    </el-tag>
                    <el-tag size="mini" v-else-if="!!item.closed && !!item.hand_closed"
                            type="success">手动关闭
                    </el-tag>
                    <el-tag size="mini" v-else-if="!!item.closed && !item.hand_closed"
                            type="success">已完成
                    </el-tag>
                    <el-tag size="mini" v-else-if="!item.closed && !!item.is_expire" type="warning">
                      已过期
                    </el-tag>
                    <el-tag size="mini" v-else type="info">未执行</el-tag>
                  </div>
                </div>
              </div>
              <div v-if="isEnd" class="text-gray text-center">这里到底啦</div>
            </div>
          </div>
        </template>
        <template v-else>
          <empty-img _show _text="无工单" class="box-empty"></empty-img>
        </template>
      </el-tab-pane>
			<el-tab-pane label="换画" name="7" lazy>
			  <template v-if="list.length>0">
			    <div ref="scroll7" class="scroll-list"
			         style="white-space:nowrap;flex:1;overflow:hidden;display:flex;flex-flow:column;height: calc(100vh - 40px);">
			      <div class="scroll-content">
			        <div class="card" v-for="(item, index) in list" :key="item.id" @click="showDetail(item.id)">
			          <div class="title">
			            <div>{{ item.name }}</div>
			          </div>
			          <div class="tip" v-if="item.customer_name">
			            <div class="text-gray">
			              客户名称：{{ item.customer_name }}
			            </div>
			          </div>
			          <div class="tip">
			            <div :class="[item.is_expire?'text-red':'text-gray']">
			              截止时间：{{ (item.deadline).substring(0, 10) }}
			            </div>
			
			          </div>
			          <div class="tip">
			            <div>待审核：<span
			              :style="{color:(item.installed_to_check_num>0?'orange':'#111')}">{{
			                item.installed_to_check_num
			              }}</span>
			            </div>
			          </div>
			          <div class="tip">
			            <div>已通过：<span
			              :style="{color:(item.installed_passed_num>0?'green':'#111')}">{{ item.installed_passed_num }}</span>
			            </div>
			          </div>
			          <div class="tip">
			            <div>总数：{{ item.total_num }}</div>
			            <div>
			              <el-tag size="mini" v-if="!item.closed && !!item.is_exe && !item.is_expire">执行中
			              </el-tag>
			              <el-tag size="mini" v-else-if="!!item.closed && !!item.hand_closed"
			                      type="success">手动关闭
			              </el-tag>
			              <el-tag size="mini" v-else-if="!!item.closed && !item.hand_closed"
			                      type="success">已完成
			              </el-tag>
			              <el-tag size="mini" v-else-if="!item.closed && !!item.is_expire" type="warning">
			                已过期
			              </el-tag>
			              <el-tag size="mini" v-else type="info">未执行</el-tag>
			            </div>
			          </div>
			        </div>
			        <div v-if="isEnd" class="text-gray text-center">这里到底啦</div>
			      </div>
			    </div>
			  </template>
			  <template v-else>
			    <empty-img _show _text="无工单" class="box-empty"></empty-img>
			  </template>
			</el-tab-pane>
			<el-tab-pane label="监播" name="8" lazy>
			  <template v-if="list.length>0">
			    <div ref="scroll8" class="scroll-list"
			         style="white-space:nowrap;flex:1;overflow:hidden;display:flex;flex-flow:column;height: calc(100vh - 40px);">
			      <div class="scroll-content">
			        <div class="card" v-for="(item, index) in list" :key="item.id" @click="showDetail(item.id)">
			          <div class="title">
			            <div>{{ item.name }}</div>
			          </div>
			          <div class="tip" v-if="item.customer_name">
			            <div class="text-gray">
			              客户名称：{{ item.customer_name }}
			            </div>
			          </div>
			          <div class="tip">
			            <div :class="[item.is_expire?'text-red':'text-gray']">
			              截止时间：{{ (item.deadline).substring(0, 10) }}
			            </div>
			
			          </div>
			          <div class="tip">
			            <div>待审核：<span
			              :style="{color:(item.installed_to_check_num>0?'orange':'#111')}">{{
			                item.installed_to_check_num
			              }}</span>
			            </div>
			          </div>
			          <div class="tip">
			            <div>已通过：<span
			              :style="{color:(item.installed_passed_num>0?'green':'#111')}">{{ item.installed_passed_num }}</span>
			            </div>
			          </div>
			          <div class="tip">
			            <div>总数：{{ item.total_num }}</div>
			            <div>
			              <el-tag size="mini" v-if="!item.closed && !!item.is_exe && !item.is_expire">执行中
			              </el-tag>
			              <el-tag size="mini" v-else-if="!!item.closed && !!item.hand_closed"
			                      type="success">手动关闭
			              </el-tag>
			              <el-tag size="mini" v-else-if="!!item.closed && !item.hand_closed"
			                      type="success">已完成
			              </el-tag>
			              <el-tag size="mini" v-else-if="!item.closed && !!item.is_expire" type="warning">
			                已过期
			              </el-tag>
			              <el-tag size="mini" v-else type="info">未执行</el-tag>
			            </div>
			          </div>
			        </div>
			        <div v-if="isEnd" class="text-gray text-center">这里到底啦</div>
			      </div>
			    </div>
			  </template>
			  <template v-else>
			    <empty-img _show _text="无工单" class="box-empty"></empty-img>
			  </template>
			</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getWorkOrderList
} from "@/api/app/worker.js";
import {
  Message
} from 'element-ui';
import {
  cloneDeep
} from 'lodash';
import {
  setAppToken,
  removeAppToken,
  setAppCompanyId,
  removeAppCompanyId
} from '@/utils/auth'
import BScroll from "@better-scroll/core";
import Pullup from "@better-scroll/pull-up";
import emptyImg from "@/components/EmptyImg";

BScroll.use(Pullup);
export default {
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#FFFFFF");
  },

  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
    this.bscroll && this.bscroll.destroy();
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy();
    next();
  },
  activated() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#FFFFFF");
  },
  deactivated() {
    document.querySelector("body").removeAttribute("style");
    this.bscroll = null;
  },
  components: {
    emptyImg
  },
  data() {
    return {
      isEnd: false,
      list: [],
      listParams: {
        work_order_type_ids: [],
        closed: null,
        is_expire: null,
        is_exe: null,
        my_submit: null,
        page: 1,
        page_size: 10
      },
      bscroll: null,
      isPullUpLoad: false,
      // isPullDownLoad: false,
      bsOptions: {
        scrollY: true,
        click: true,
        /* pullDownRefresh: {
          threshold: 90,
          stop: 10
        }, */
        pullUpLoad: true,
        bounce: {
          top: true,
          bottom: true
        }
      },

      curTab: '1',
      fullscreenLoading: false,
      token: '',
      companyId: '',
    }
  },
  created() {
    this.getParams()
    this.listParams = Object.assign(this.listParams, {
      work_order_type_ids: [1]
    });
    this.getList(false)
      .then(() => {
        this.initBScroll();
      })
  },
  methods: {
    showDetail(id) {
      let that = this;
      that.$router.push({
        path: '/app/view/workorder_building',
        query: {
          id: id,
          type: this.curTab,
        }
      })
    },
    getParams() {
      const url = window.location.href;
      if (url.indexOf('?') != -1) {
        var cs = window.location.href.split('?')[1]; //获取?之后的参数字符串
        var cs_arr = cs.split('&'); //参数字符串分割为数组
        var cs = {};
        for (var i = 0; i < cs_arr.length; i++) { //遍历数组，拿到json对象
          cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
        }
        if (!!cs['token']) {
          this.token = decodeURI(cs['token']);
          setAppToken(this.token);
        } else {
          removeAppToken();
        }
      }
    },
    resetPage() {
      const that = this;
      that.list = [];
      that.isEnd = false;
      that.listParams.page = 1;
      that.listParams.page_size = 10;
      that.bscroll = null;
    },
    changeTab(tab) {
      const that = this;
      that.resetPage();
      that.listParams.work_order_type_ids = [parseInt(tab.paneName)]
      that.getList(false);
    },
    getList(add = true) {
      const that = this;
      if (!that.isEnd) {
        that.fullscreenLoading = true;
        return getWorkOrderList(that.listParams)
          .then(({
                   data: {
                     current,
                     pages,
                     total,
                     records,
                     size
                   }
                 }) => {
            that.fullscreenLoading = false;
            if (add) {
              that.list = (that.list || []).concat(records || []);
            } else {
              that.list = records || [];
            }
            that.listParams.page++;
            let flag = (total / size) <= current;
            if (flag) {
              that.isEnd = true;
            }
            that.initBScroll();
          })
      }
    },
    initBScroll() {
      const that = this;
      that.$nextTick(() => {
        const $scrollRef = that.$refs['scroll' + that.curTab];
        if (!$scrollRef) return false;
        $scrollRef.hasVerticalScroll = true;
        if (!that.bscroll) {
          that.bscroll = new BScroll($scrollRef, that.bsOptions);
          that.bscroll.on("pullingUp", () => {
            that.getList().then(() => {
              that.$nextTick(() => {
                that.bscroll.finishPullUp();
                that.bscroll.refresh();
                // this.isPullDownLoad = false;
                that.isPullUpLoad = false;
              });
            });
          });
          /* this.bscroll.on("pullingDown", () => {
            this.isEnd = false;
            this.list = [];
            this.listParams = {
              pageNum: 1,
              pageSize: 10
            };
            this.getList(1).then(() => {
              this.$nextTick(() => {
                this.bscroll.finishPullDown();
                this.bscroll.refresh();
                this.isPullDownLoad = false;
                this.isPullUpLoad = false;
              });
            });
          }); */
        } else {
          that.bscroll && that.bscroll.refresh();
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.page {
  font-size: 14px;
}

.scroll-list {
  padding: 0 10px;

  .scroll-content {
    .card {
      display: flex;
      flex-flow: column;
      padding: 11px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      min-height: 74px;
      box-sizing: border-box;
      margin: 15px 0;
      box-shadow: 1px 1px 10px 1px #eee;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        div:nth-child(1) {
          width: 100%;
          white-space: normal;
          font-size: 16px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(36, 36, 36, 1);
          line-height: 22px;
        }

        div:nth-child(2) {
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(134, 134, 134, 1);
          line-height: 17px;
        }
      }

      .tip {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 18px;
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(88, 88, 88, 1);
        line-height: 18px;
        margin-top: 11px;
      }
    }
  }
}

.box-empty {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  margin-top: 40%;
}
</style>
